


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 网站用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiAdmin.std/src/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiAdmin.std/src/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" placeholder="用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" placeholder="手机号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="btn-search" id="btnSearch">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        搜索一下
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layui-btn-danger"  onclick="del_batch()">批量删除</button>
                <button class="layui-btn" onclick="add()">创建用户</button>
            </div>

            <table id="TableList" lay-filter="TableList"></table>
            <script type="text/html" id="tools">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
    </div>
</div>

<script src="/static/layuiAdmin.std/src/layuiadmin/layui/layui.js"></script>
<script>
    var $;
    var form;
    var table;

    function add() {
        layer.open({
            type: 2
            ,title: '创建用户'
            ,content: 'edit?id=0'
            ,maxmin: true
            ,area: ['1000px', '600px']
        });
    }

    function del_batch() {
        var checkStatus = table.checkStatus('TableList')
        var checkData = checkStatus.data; //得到选中的数据

        if(checkData.length === 0){
            return layer.msg('请选择数据');
        }


        var ids = [];
        for (var i = 0; i < checkData.length; i++) {
            ids.push(checkData[i].id);
        }
        del(ids.join(','))
    }

    function del(ids) {
        layer.confirm('确定删除吗？', function(index) {
            $.ajax({
                url: 'del_user',
                type: 'POST',
                data: {
                    ids: ids
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code == '0') {
                        layer.msg('删除成功', { icon: 1, time: 2000 }, function () {
                            layer.closeAll()
                            $('#btnSearch').click();
                        });

                    } else {
                        layer.msg(data.msg, { icon: 5, time: 2000 });
                    }
                }
            });
        });
    }

    function edit(id) {
        layer.open({
            type: 2
            ,title: '编辑用户'
            ,content: 'edit?id=' + id
            ,maxmin: true
            ,area: ['1000px', '600px']
        });
    }

    layui.config({
        base: '/static/layuiAdmin.std/src/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function(){
        $ = layui.$
        form = layui.form
        table = layui.table;

        //用户管理
        table.render({
            elem: '#TableList'
            //,url: layui.setter.base + 'json/useradmin/webuser.js' //模拟接口
            ,url: 'list'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', width: 100, title: 'Id', sort: true}
                ,{field: 'username', title: '用户名', minWidth: 100}
                ,{field: 'phone', title: '手机'}
                ,{field: 'email', title: '邮箱'}
                ,{field: 'sex', width: 80, title: '性别'}
                ,{field: 'ip', title: 'ip'}
                ,{title: '操作', width: 150, align:'center', fixed: 'right', toolbar: '#tools'}
            ]]
            ,page: true
            ,limit: 20
            ,height: 'full-220'
            ,text: '对不起，加载出现异常！'
        });

        //监听工具条
        table.on('tool(TableList)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                del(obj.data.id)
            } else if(obj.event === 'edit'){
                edit(obj.data.id)
            }
        });

        //监听搜索
        form.on('submit(btn-search)', function(data){
            var field = data.field;

            //执行重载
            table.reload('TableList', {
                where: field
            });
        });

    });
</script>
</body>
</html>
